CSS Full Course Day 7 [Hindi] 💻 | Positioning (Static, Relative, Absolute, Fixed) 🚀 | Mohit Decodes

📌 CSS Tutorial – Day 7: Positioning (Static, Relative, Absolute, Fixed)

Welcome to Day 7 of the CSS Full Course [Hindi] by Mohit Decodes! Today’s lesson focuses on CSS Positioning — how you control the exact placement of elements on a web page.

🔹 Types of CSS Positioning

  1. Static (Default)
  2. Elements follow the normal flow of the page
  3. No special positioning applied
  4. Default value for all elements
  5. Relative
  6. Positioned relative to its normal position
  7. Use top, bottom, left, right to move it around without affecting other elements’ positions
  8. Absolute
  9. Positioned relative to the nearest positioned ancestor (relative, absolute, or fixed)
  10. Removed from normal flow, does not affect other elements
  11. Use top, bottom, left, right for exact placement
  12. Fixed
  13. Positioned relative to the browser window
  14. Stays fixed even when scrolling
  15. Common for sticky headers or floating buttons

⚙️ Example CSS:

css
CopyEdit
.static-box {
position: static;
background-color: lightgray;
}

.relative-box {
position: relative;
top: 10px;
left: 20px;
background-color: lightblue;
}

.absolute-box {
position: absolute;
top: 50px;
right: 30px;
background-color: lightgreen;
}

.fixed-box {
position: fixed;
bottom: 10px;
right: 10px;
background-color: lightcoral;
width: 150px;
padding: 10px;
color: white;
}

💡 Tips:

  1. Use relative positioning for slight adjustments without disrupting layout
  2. Absolute positioning is great for overlays, modals, or tooltips
  3. Fixed is useful for sticky navigation bars or floating action buttons
  4. Always consider responsiveness and stacking context (z-index)